<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>4-1盒模型宽过渡</title>
</head>
<style>
    .chart{
        width: 200px;
        height: 50px;
        background-color: orange;
    }
    .box-enter-active,.box-leave-active{
        transition: width 3s;
    }
    /*box-enter的意思是，在插入这个dom元素之前,其他亦然*/
    .box-enter,.box-leave-to {
       width:  000px;
    }

    .box-enter-to,.box-leave{
        width: 200px;
        background-color: pink;
    }
</style>
<body>
<div id="app">
  <button @click="toggle">transform width of picture</button>
    <transition name="box">
        <div class="chart" v-if="show"></div>
    </transition>
 </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            toggle(){
                this.show=!this.show
            }
        }
    })
</script>
</html>